import './index.scss'
import React from 'react'

import { Swiper, SwiperItem, View, Text, Image,Icon } from "@tarojs/components";
import type { MerchantType } from '../../../types/userData'
import Taro from '@tarojs/taro';


export default function MerchantItem({merchant}): JSX.Element{
  // 定义props
  function jumpToDetailPage(){
    Taro.navigateTo({
      url:`/pages/merchantDetail/index?id=${merchant.id}`
    })
  }
  return (
    <View className='merchant-item' onClick={jumpToDetailPage}>
      <View>
        <Image
          src={merchant.image}
          className='merchant-image'
          mode='widthFix'
        />
      </View>
      <View className='merchant-info'>
        <View className='merchant-name'>
          {merchant.name}
        </View>
        <View className='merchant-ratio'>
          兑换比例: {merchant.ratio}
        </View>
        <View className='merchant-location' style={{ flexDirection: 'row', alignItems: 'baseline' }}>
          <View className='at-icon at-icon-home'></View>
          <Text  className='merchant-location-txt'>
            {merchant.location}
          </Text>
        </View>
      </View>
      
    </View>
  )
  
}

 